<template>
  <view @click="toDetail">
    <Crad>
      <template #title>
        <view class="disFlxAC pb-13" style="border-bottom: 1px solid #ebedf0">
          <TImage
            width="40rpx"
            height="40rpx"
            :src="`https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/${
              data?.boType === BoTypeEnum.Demand ? 'xu' : 'gong'
            }.png`"
          />
          <text class="ml-4 mr-10 fz-14 linh-20 ov-1 flex-1">
            {{ data.title }}
          </text>
          <TButton
            text="推广供需"
            type="none"
            :customStyle="{
              backgroundColor: '#FFF',
              color: '#2878FF',
              border: '1px solid #2878FF',
            }"
            custom-class="h-24 linh-24 br-12"
            @click.stop="handleShare"
          />
        </view>
      </template>
      <template #default>
        <view class="disFlxJS statistcs">
          <view class="num-name">
            <text class="fz-18 font-bold linh-28">{{ data.browseNum }}</text>
            <text class="fz-12 linh-16" style="color: #969799">浏览次数</text>
          </view>
          <view class="gap-box"></view>
          <view class="num-name">
            <text class="fz-18 font-bold linh-28">{{ data.intentionNum }}</text>
            <text class="fz-12 linh-16" style="color: #969799">意向数量</text>
          </view>
          <view class="gap-box"></view>
          <view class="num-name">
            <text class="fz-18 font-bold linh-28">{{ data.contactNum }}</text>
            <text class="fz-12 linh-16" style="color: #969799">已联系</text>
          </view>
        </view>
      </template>
    </Crad>
  </view>
</template>
<script setup lang="ts">
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import Crad from '@/components/Crad/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import type { IPromotionRecord } from '@/api/businessOpportunities/type';
  import type { PropType } from 'vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';

  const props = defineProps({
    data: {
      type: Object as PropType<IPromotionRecord>,
      default: () => ({}),
    },
  });
  const emits = defineEmits(['share']);
  const toDetail = () => {
    navigateTo({
      name: 'extensionDtail',
      options: {
        id: props.data.id,
        boInfoId: props.data.boInfoId,
      },
    });
  };

  const handleShare = () => {
    emits('share', props.data);
  };
</script>
<style lang="scss" scoped>
  .statistcs {
    .num-name {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      align-items: center;
      justify-content: center;
      width: 128rpx;
      height: 160rpx;
    }
    .gap-box {
      width: 2rpx;
      height: 80rpx;
      background: linear-gradient(
        180deg,
        rgba(235, 237, 240, 0) 0%,
        #ebedf0 50%,
        rgba(235, 237, 240, 0) 100%
      );
    }
  }
</style>
